<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" errorPage="500.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.duyiedu.com" prefix="myFn"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选座</title>
	</head>
	<link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/seat.css">
  	<link rel="stylesheet" href="css/common.css">
  	<!-- 小图标 -->
  	<link rel="icon" href="css/favicon.ico" type="image/x-icon" />
    <script src="js/jquery-1.12.4.js"></script>
<body>
	<!-- 头部 -->
	<div class="header">
    	<div class="header-inner">
	      	<h1>
	        	<a href="index.html" class="logo">太平洋影城</a>
	      	</h1>
      		<div class="nav">
	        	<ul class="navbar">
		          	<li>
		            	<a href="index">首页</a>
		          	</li>
	          		<li>
	            		<a href="hotFilm.do">电影</a>
	          		</li>
	          		<li>
	            		<a href="#">影院</a>
	          		</li>
	          		<li>
	            		<a href="#">演出</a>
	          		</li>
		          	<li>
		            	<a href="billboard.do">榜单</a>
		          	</li>
	          		<li>
	            		<a href="#">热点</a>
	          		</li>
	          		<li>
	            		<a href="#">商城</a>
	          		</li>
	        	</ul>
      		</div>
      		<div class="user-info">
        		<div class="user-avatar J-login">
	          		<c:choose>
	       				<c:when test="${sessionScope.userLogin !=null}">
	         				<img src="${sessionScope.userLogin.uImg}">
	       				</c:when>
	       				<c:otherwise>
	         				<img src="img/top_img/default_head.png">
	       				</c:otherwise>
	     			</c:choose>
	     			<span class="caret"></span>
	     			<c:choose>
	       				<c:when test="${sessionScope.userLogin !=null}">
	         				<ul class="user-menu yes-login-menu">
					           	<li class="text">
					             	<a href="order.do?uid=${sessionScope.userLogin.uId}">我的订单</a>
					           	</li>
					           	<li class="text login-name" >
					             	<a href="userEssential.do?uId=${sessionScope.userLogin.uId}">基本信息</a>
					           	</li>
					           	<li class="text">
					             	<a href="exit.do" class="J-logout">退出登录</a>
					           	</li>
	         				</ul>
	       				</c:when>
				       	<c:otherwise>
				         	<ul class="user-menu no-login-menu">
					           	<li>
					           		<a href="login.jsp">登录</a>
					           	</li>
				         	</ul>
				       	</c:otherwise>
	     			</c:choose>
      			</div>
    		</div>
		    <form action="searchFilm.do" method="post" class="search-form">
		      	<input name="kw" class="search" type="search" maxlength="32" placeholder="找影视剧、影人、影院">
		      	<input class="submit" type="submit" value="">
		    </form>
    		<div class="app-download">
		      	<a href="#">
		        	<span class="iphone-icon"></span>
		        	<span class="apptext">APP下载</span>
		        	<span class="caret"></span>
		        	<div class="download-icon">
		          		<p class="down-title">扫码下载APP</p>
		          		<p class="down-content">选座更优惠</p>
		        	</div>
		      	</a>
    		</div>
  		</div>
	</div>
	<!-- 占位符 -->
    <div class="header-placeholder"></div>
    <div class="container">
        <div class="order-progress-bar">
            <div class="step first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step done">
                <span class="step-num">2</span>
                <div class="bar"></div>    
                <span class="step-text">选择座位</span>    
            </div>
            <div class="step ">
                <span class="step-num">3</span>
                <div class="bar"></div>    
                <span class="step-text">15分钟内付款</span>
            </div>
            <div class="step last ">
                <span class="step-num">4</span>
                <div class="bar"></div>    
                <span class="step-text">影院取票观影</span>    
            </div>
        </div>
        <div class="main clearfix">
            <div class="hall">
                <div class="seat-example">
                    <div class="selectable-example example">
                        <span>可选座位</span>
                    </div>
                    <div class="sold-example example">
                        <span>已售座位</span>
                    </div>
                    <div class="selected-example example">
                        <span>已选座位</span>
                    </div>
                    <div class="couple-example example">
                        <span>情侣座位</span>
                    </div>
                </div>
                <div class="seats-block">
                    <div class="row-id-container">
                        <span class="row-id">1</span>    
                        <span class="row-id">2</span>    
                        <span class="row-id">3</span>    
                        <span class="row-id">4</span>    
                        <span class="row-id">5</span>    
                        <span class="row-id">6</span>    
                        <span class="row-id">7</span>    
                        <span class="row-id">8</span>    
                  </div>
                  <div class="seats-container">
                    <div class="screen-container" style="left: 45px;">
                        <div class="screen">银幕中央</div>
                        <div class="c-screen-line"></div>
                    </div>
                    <div class="seats-wrapper">
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="0" end="13" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="14" end="27" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="28" end="41" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="42" end="55" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="56" end="69" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="70" end="83" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="84" end="97" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <div class="row">
	                    	<c:forEach items="${sessionScope.allSeats}" begin="98" end="111" var="seat">
	                    		<span class="seat selectable" seat="${seat.seatNumber}" id="${seat.seatId}"></span>
	                    	</c:forEach>
	                    </div>
	                    <c:forEach items="${sessionScope.soldSeats}" var="seat">
	                    	<input type="hidden" value="${seat.seatId}">
	                    </c:forEach>
                    </div>
                  </div>
                </div>
            </div>
            <div class="side">
                <div class="movie-info clearfix">
                    <div class="poster">
                        <img src="${sessionScope.filmDetails.filmImg}">
                    </div>
                  <div class="content">
                    <p class="name text-ellipsis">${sessionScope.filmDetails.filmName}</p>
                    <div class="info-item">
                        <span>类型 :</span>
                        <span class="value">
                        	<c:forEach items="${sessionScope.filmDetails.filmTypes}" var="type" varStatus="flag">
                        		<c:if test="${!flag.last}">
                        			${type.typeName},
                        		</c:if>
                        		<c:if test="${flag.last}">
                        			${type.typeName}
                        		</c:if>
				          	</c:forEach>
                        </span>
                    </div>
                    <div class="info-item">
                        <span>时长 :</span>
                        <span class="value">${sessionScope.filmDetails.filmTime}</span>
                    </div>
                  </div>
                </div>
                <div class="show-info">
                    <div class="info-item">
                        <span>影院 :</span>
                        <span class="value text-ellipsis">万达影城（龙泉驿万达广场杜比影院店）</span>
                    </div>
                    <div class="info-item">
                        <span>影厅 :</span>
                        <span class="value text-ellipsis">${sessionScope.showingsInfo.filmOffice.offName}</span>
                    </div>
                    <div class="info-item">
                        <span>版本 :</span>
                        <span class="value text-ellipsis">${sessionScope.showingsInfo.film.filmIunguage}</span>
                    </div>
                    <div class="info-item">
                        <span>场次 :</span>
                        <span class="value text-ellipsis screen">${myFn:formatDate(sessionScope.showingsInfo.showingsDay)} ${myFn:formatTime(sessionScope.showingsInfo.showingsStartTime)}</span>
                    </div>
                    <div class="info-item">
                        <span>票价 :</span>
                        <span class="value text-ellipsis" id="price">￥${sessionScope.showingsInfo.showingsPrice}/张</span>
                    </div>
                </div>
                <div class="ticket-info">
                    <div class="no-ticket" style="display: block;">
                        <p class="buy-limit">座位：一次最多选5个座位</p>
                        <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                    </div>
                    <div class="has-ticket" style="display: none;">
                        <span class="text">座位：</span>
                        <div class="ticket-container"></div>
                    </div>
                <div class="total-price">
                    <span>总价 :</span>
                    <span class="price" id="sumPrice">0</span>
                </div>
                </div>
                <div class="confirm-order">
                    <div class="cellphone">
                        <span>手机号 :</span>
                        <span class="phone-num">${myFn:formatPhoneNum(sessionScope.userLogin.uPhoneNum)}</span>
                    </div>
                    <div class="confirm-btn disable">确认选座</div>
                    <input type="hidden" value="${sessionScope.showingsInfo.showingsId}" id="showingsId">
                    <input type="hidden" value="${sessionScope.userLogin.uId}" id="uid">
                </div>
            </div>
        </div>
        <div class="modal-container">
            <div class="modal">
                <span class="icon"></span>
                <p class="tip">一次最多购买5张票</p>
                <div class="ok-btn btn" onclick="hideModel()">我知道了</div>
            </div>
        </div>
    </div>
<!-- 底部 -->
	<div class="footer">
    	<div class="content">
      		<div class="moduleBox">
        		<div class="informationBox">
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影城公告</span>
            			</a>
            			<ul>
              				<li>影城公告</li>
            			</ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>会员中心</span>
            			</a>
			            <ul>
			              	<li>加入会员</li>
			              	<li>会员活动</li>
			              	<li>会员优惠</li>
			            </ul>
          			</div>
          			<div class="copy_van">
            			<a class="ycgg" href="">
            				<span>影片资讯</span>
            			</a>
			            <ul>
			              	<li>正在热映</li>
			              	<li>即将上映</li>
			            </ul>
          			</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>影城活动</span>
		            	</a>
		            	<ul>
		              		<li>影城活动</li>
		              		<li>电影资讯</li>
		            	</ul>
		          	</div>
		          	<div class="copy_van">
		            	<a class="ycgg" href="">
		            		<span>关于我们</span>
		            	</a>
			            <ul>
			              	<li>影城介绍</li>
			              	<li>影院介绍</li>
			              	<li>联系我们</li>
			            </ul>
		          	</div>
        		</div>
        		<div class="abc">
          			<div class="textFloat">
            			<div class="erwei1">
                        	<span class="spans ">
                               	<img class="img1" src="img/foot_img/wxerweima.png" alt="">
                            </span>
              				<span class="spans spanss">
                            	<a href="">微信在线购票</a>
                            </span>
            			</div>
            			<div class="erwei2">
                            <span class="spans">
                        		<img class="img1" src="img/foot_img/xcx.jpg" alt="">
                            </span>
              				<span class="spans spanss">
                                <a href="">小程序在线购票</a>
                            </span>
            			</div>
          			</div>
        		</div>
        		<div class="right_information">
		          	<ul class="ul1">
		            	<li class="lis1">连锁热线：</li>
		            	<li class="lis2">400-850-3366</li>
		          	</ul>
		          	<ul class="ul1">
		            	<li class="lis3">官方微信：</li>
		            	<li class="lis4">搜索“猫眼电影”</li>
		          	</ul>
        		</div>
		        <div class="top_btn">
                    <span>
                       	<a href="javascript:void(0)" id="top">TOP</a>
                    </span>
		        </div>
      		</div>
	      	<div class="foot_text">
	       		<div class="foot"> 版权所有(C)猫眼电影投资有限公司　　技术支持：3-1-501</div>
      		</div>
    	</div>
  	</div>
</body>
<script src="js/seat.js"></script>
<script src="js/common.js"></script>
</html>